Couleurs
Primary (Main - Bleu foncé)
Couleur de marque: 900 (#00354A)
Secondary (Rouge)
Couleur de marque: 600 (#E3021E)
Accent (Or)
Couleur de marque: 500 (#B08F47)
Info (Bleu clair)
Couleur de marque: 500 (#4A94B4)
Slate (Gris ardoise)
Couleur de marque: 500 (#67737A)
Burgundy (Bordeaux)
Couleur de marque: 900 (#600128)
Couleurs sémantiques
#228452
#F59E0B
#E3021E
#4A94B4
Typographie
Police des titres (H1-H5): MontreuxGS (Police locale)
Graisses: Regular (400), DemiBold (600), Bold (700) — Letter-spacing: aucun
Classes: font-heading text-h1-desktop
Police alternative titres + corps: Inter (Google Fonts)
Graisses: Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800) — Letter-spacing: 0.006em
Classes titres: font-inter text-h1-inter-desktop | Corps: text-body
MontreuxGS — Police des titres
Letter-spacing : aucun (normal)
Regular (400) — Commune de Strassen
DemiBold (600) — Commune de Strassen
Bold (700) — Commune de Strassen
Regular Italic — Commune de Strassen
Bold Italic — Commune de Strassen
Inter — Police alternative (titres + corps)
Letter-spacing : 0.006em (0.1px) — S'applique aux titres H1-H5 Inter et au corps de texte
Light (300) — La commune de Strassen vous souhaite la bienvenue.
Regular (400) — La commune de Strassen vous souhaite la bienvenue.
Medium (500) — La commune de Strassen vous souhaite la bienvenue.
SemiBold (600) — La commune de Strassen vous souhaite la bienvenue.
Bold (700) — La commune de Strassen vous souhaite la bienvenue.
ExtraBold (800) — La commune de Strassen vous souhaite la bienvenue.
Échelle typographique — Titres (MontreuxGS)
Heading 1
Mobile: 35px/45px | Tablet: 45px/55px | Desktop: 50px/60pxtext-h1-mobile md:text-h1-tablet lg:text-h1-desktop font-heading
Heading 2
Mobile: 30px/40px | Tablet: 40px/50px | Desktop: 55px/63pxtext-h2-mobile md:text-h2-tablet lg:text-h2-desktop font-heading
Heading 3
Mobile: 22px/30px | Tablet: 27px/37px | Desktop: 30px/40pxtext-h3-mobile md:text-h3-tablet lg:text-h3-desktop font-heading
Heading 4
Mobile: 20px/28px | Tablet: 25px/35px | Desktop: 25px/35pxtext-h4-mobile md:text-h4-tablet lg:text-h4-desktop font-heading
Heading 5
Mobile: 20px/28px | Tablet: 22px/32px | Desktop: 22px/32pxtext-h5-mobile md:text-h5-tablet lg:text-h5-desktop font-heading
Échelle typographique — Titres (Inter)
Heading 1 Inter
Letter-spacing: 0.006emtext-h1-inter-mobile md:text-h1-inter-tablet lg:text-h1-inter-desktop font-inter
Heading 2 Inter
Letter-spacing: 0.006emtext-h2-inter-mobile md:text-h2-inter-tablet lg:text-h2-inter-desktop font-inter
Heading 2 Inner (pages intérieures)
Inter — 30px / 35px / 40px — Letter-spacing: 0.006emtext-h2-inner-mobile md:text-h2-inner-tablet lg:text-h2-inner-desktop font-inter
Heading 3 Inter
Letter-spacing: 0.006emtext-h3-inter-mobile md:text-h3-inter-tablet lg:text-h3-inter-desktop font-inter
Heading 4 Inter
Letter-spacing: 0.006emtext-h4-inter-mobile md:text-h4-inter-tablet lg:text-h4-inter-desktop font-inter
Heading 5 Inter
Letter-spacing: 0.006emtext-h5-inter-mobile md:text-h5-inter-tablet lg:text-h5-inter-desktop font-inter
Échelle typographique — Corps (Inter)
Body Big - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
20px/30pxtext-body-big
Body - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
18px/28pxtext-body
Body Medium - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
15px/25pxtext-body-medium
Body Small - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
14px/24pxtext-body-small
Body XSmall - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
12px/16px (0.75rem/1rem)font-size: 0.75rem; line-height: 1rem; font-weight: 400
Boutons
Sur fond clair
Primary - Rouge (CTA) + shine + bounce
Primary - Or + shine + bounce
Primary - Blanc (sur fond coloré) + shine + bounce
Small buttons + shine + bounce
Sur fond foncé
White Stroke + shine + bounce
Primary - Blanc + shine + bounce
Primary - Rouge + shine + bounce
Tags / Catégories
Hover pour voir l'effet shine + transition fluide
Cards
Card Standard
Border, pas de shadow par défaut. Shadow au hover.
rounded-[10px]
Card avec image
Overflow hidden pour les images.
Card sur fond foncé
Texte clair sur fond primary-900.
Formulaires
Alertes
Message de succès - Votre action a bien été enregistrée.
Message d'avertissement - Attention, cette action est irréversible.
Message d'erreur - Une erreur s'est produite. Veuillez réessayer.
Message informatif - Voici une information importante.
Border Radius
None
0px
Small
5px
Medium
10px
Large
100px
Espacement Sections
Mobile
50px
3.125rem
Tablet
70px
4.375rem
Desktop
120px
7.5rem
Liens
Sur fond clair
Lien navigation + underline animé
Lien de navigationLien inline (dans le texte) + underline animé
Voici un paragraphe avec un lien inline qui apparait dans le texte.
Lien actif (souligné permanent)
Lien actifGroupe de liens navigation
Sur fond foncé
Lien footer + underline animé
Lien footerLien inline sur fond foncé
Texte avec un lien doré intégré.
Groupe de liens footer
Icônes
Icônes UI cohérentes sur tout le site. ViewBox 24x24, stroke-width: 1.5px
Bibliothèque d'icônes SVG custom pour la commune. ViewBox 48x48, stroke-width: 1.5px, couleur: #b59e45
Emplacement : site-final-design/icons_strassen/
Bibliothèque Strassen - Toutes les icônes (232)
com- Communication / Administration (47)
addressbook
at
badge
building
calendar
camera
cart
chat
checkbox
clipboard
coins
document
doc-check
envelope
eye
file
flag
gallery
globe
grid
home
hospital
idcard
image
info
key
lightning
lock
mobile
paperclip
pen
phone
pin
play
presentation
puzzle
qrcode
running
safe
scissors
search
search-user
settings
speech
sync
user
wifimed- Médical (16)
ambulance
bandage
brain
clipboard
dna
firstaid
heart
hospital
pills
plus
stethoscope
syringe
thermometer
tooth
virus
wheelchaireco- Écologie / Durabilité (18)
battery
clock
dots
forest
globe
home
house
leaf
lightbulb
nature
plant
recycle
seedling
sun
tree
water
wave
windevt- Culture / Événements (16)
book
camera
concert
dance
exhibition
film
fireworks
gallery
mask
microphone
music
palette
photo
stage
theater
ticketloc- Localisation / Cartes (12)
compass
directions
distance
flag
globe
map
marker
navigation
parking
pin
pin-add
routeedu- Éducation (16)
abc
book
certificate
desk
glasses
graduation
laptop
lightbulb
notebook
online
pencil
presentation
ruler
school
student
videonat- Nature / Faune / Parcs (30)
acorn
backpack
bee
bench
binoculars
bird
butterfly
campfire
canoe
compass
deer
feather
fish
flashlight
flower
footprint
knife
leaf
mountain
mushroom
paw
picnic
pine
rabbit
scout-badge
squirrel
sun
tent
tree
waterppl- Personnes (17)
accessibility
baby
chef
child
couple
doctor
family
group
handshake
person
pregnant
senior
sport
teacher
volunteer
wheelchair
workersrv- Services Communaux (6)
maintenance
office
repair
tools
trash
watertrp- Transport / Circulation (6)
bike
bus
car
parking
scooter
trafficspt- Sport (18)
ball
basketball
boxing
climbing
cycling
fitness
football
golf
gym
medal
podium
runner
scoreboard
skating
swim
tennis
trophy
yogaxms- Noël (30)
angel
bell
calendar
candle
candy
carol
chimney
cocoa
cookie
elf
fireplace
gift
gingerbread
holly
mittens
nutcracker
ornament
present
reindeer
santa
sleigh
snowflake
snowglobe
snowman
star
stocking
train
tree
village
wreathPour les icônes UI (flèches, chevrons, menu, fermer). Style outline, linéaire moderne.
Sur fond clair
Taille standard (24px) - stroke: 1.3px
Petite taille (20px) - navigation/boutons
Grande taille (32px) - illustrations
Avec bouton
Sur fond foncé
Icônes blanches - stroke: 1.3px
Icônes accent (or)
Avec bouton outline
Code SVG avec stroke-width: 1.5px
<svg class="w-6 h-6 text-primary-900" style="stroke-width: 1.5px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="..."/>
</svg>